<template>
  <div class="main-tab-bar">
    <!-- tabbar组件 -->
    <tab-bar>
      <tab-bar-item path="/home" activeColor="#13227a">
        <img
          src="@/assets/img/tabbar/home.svg"
          alt="the is icon img"
          slot="icon"
        />
        <img
          src="@/assets/img/tabbar/home-active.svg"
          alt="the is icon img"
          slot="icon-active"
        />
        <div slot="text">首页</div>
      </tab-bar-item>
      <tab-bar-item path="/category" activeColor="#13227a">
        <img
          src="@/assets/img/tabbar/category.svg"
          alt="the is icon img"
          slot="icon"
        />
        <img
          src="@/assets/img/tabbar/category-active.svg"
          alt="the is icon img"
          slot="icon-active"
        />
        <div slot="text">分类</div>
      </tab-bar-item>
      <tab-bar-item path="/cart" activeColor="#13227a">
        <img
          src="@/assets/img/tabbar/shopcart.svg"
          alt="the is icon img"
          slot="icon"
        />
        <img
          src="@/assets/img/tabbar/shopcart-active.svg"
          alt="the is icon img"
          slot="icon-active"
        />
        <div slot="text">购物车</div>
      </tab-bar-item>
      <tab-bar-item path="/profile" activeColor="#13227a">
        <img
          src="@/assets/img/tabbar/profile.svg"
          alt="the is icon img"
          slot="icon"
        />
        <img
          src="@/assets/img/tabbar/profile-active.svg"
          alt="the is icon img"
          slot="icon-active"
        />
        <div slot="text">我的</div>
      </tab-bar-item>
    </tab-bar>
  </div>
</template>

<script type="text/ecmascript-6">

import TabBar from "@/components/tabbar/TabBar";
import TabBarItem from "@/components/tabbar/TabBarItem";

export default {
  name: "MainTabBar",
  data() {
    return {};
  },
  components: {TabBar,TabBarItem}
};
</script>

<style scoped lang="stylus"></style>
